<template>
  <div class="config-panel">
    <div class="mode-switch">
      <span>当前模式：</span>
      <i-switch v-model="mode" @on-change="handleModeChange" size="large">
        <span slot="open">自动</span>
        <span slot="close">手动</span>
      </i-switch>
    </div>

    <Form label-position="left" :label-width="120">
      <Row :gutter="16">
        <Col span="12" v-for="(item, index) in _config.configData" :key="index">
          <FormItem :label="item.param">
            <InputNumber
              v-if="item.param !== '整流器开关'"
              v-model="item.value"
              :precision="item.param === '目标电压' ? 1 : 0"
              :min="item.min"
              :max="item.max"
              :readonly="item.param === '浸泡时间' ? false : mode"
              @on-blur="handleValueChange(item)"
              style="width: 100%"
            >
            </InputNumber>
            <i-switch
              v-else
              v-model="item.value"
              :disabled="mode"
              @change="handleSwicthChange(item, index)"
            ></i-switch>
          </FormItem>
        </Col>
      </Row>
    </Form>

    <Table
      :data="this._config.stages"
      :columns="stagesColumns"
      :height="200"
      border
    >
      <template
        v-for="(item, idx) of stagesColumns"
        slot-scope="{ row, index }"
        :slot="item.slot"
      >
        <span v-if="item.slot === 'stage'" :key="idx">{{ row.stage }}</span>
        <InputNumber
          :key="idx"
          v-else
          v-model="row[item.slot].value"
          :min="0"
          :max="30000"
          :readonly="mode"
          @input="val => handleStageChange(item.slot, index, val)"
          @on-blur="handleStageBlur(item.slot, index)"
          style="width: 100%"
        >
        </InputNumber>
      </template>
    </Table>
  </div>
</template>

<script lang="ts">
import { T_srv, vue, N_RectifierSettings, Tsrv } from '../config';

@T_srv.comp
export default class RectifierConfigPanel extends vue {
  @T_srv.prop({ required: true }) config!: N_RectifierSettings.slotConfig;

  @T_srv.watch('config', { deep: true })
  handleConfigChange(newVal: N_RectifierSettings.slotConfig) {
    this._config = Tsrv.utils.clone(newVal, true);
    this.mode = this._config.modeInfo.value as boolean;
    this.$forceUpdate();
  }

  private mode = false;

  private stagesColumns = [
    {
      title: '阶段',
      slot: 'stage'
    },
    {
      title: '斜坡时间',
      slot: 'rampTime'
    },
    {
      title: '保持时间',
      slot: 'holdTime'
    },
    {
      title: '阶段电压',
      slot: 'voltage'
    }
  ];

  private _config: N_RectifierSettings.slotConfig;

  created() {
    this._config = Tsrv.utils.clone(this.config, true);
    this.mode = this._config.modeInfo.value as boolean;
  }

  mounted() {}

  private handleStageChange(paramName: string, index: number, val: number) {
    this._config.stages[index][paramName].value = val;
  }

  private handleStageBlur(paramName: string, index: number) {
    // 调用保存接口
    // this.saveConfig();
    const newData = Tsrv.utils.md5(JSON.stringify(this._config.stages));
    const oldData = Tsrv.utils.md5(JSON.stringify(this.config.stages));

    if (newData !== oldData) {
      this.$emit('onSaveTable', {
        tankID: this._config.tankID,
        paramName,
        index,
        val: this._config.stages[index][paramName].value
      });
    }
  }

  private handleSwicthChange(
    row: N_RectifierSettings.ConfigItem,
    index: number
  ) {
    const data = [{ ecDetCode: row.code, value: row.value.toString() }];
    Tsrv.writePlcData(data).then(_ => {
      Tsrv.readPlcData([row.code]).then(res => {
        if (typeof res !== 'boolean') {
          this._config.configData[index].value = res[row.code].v;
        }
      });
    });
  }

  private handleModeChange(val: boolean) {
    const data = [
      { ecDetCode: this._config.modeInfo.code, value: val.toString() }
    ];
    Tsrv.writePlcData(data).then(_ => {
      Tsrv.readPlcData([this._config.modeInfo.code]).then(res => {
        if (typeof res !== 'boolean') {
          this.mode = res[this._config.modeInfo.code].v;
        }
      });
    });
  }

  private handleValueChange(row: N_RectifierSettings.ConfigItem) {
    const newData = Tsrv.utils.md5(JSON.stringify(this._config.configData));
    const oldData = Tsrv.utils.md5(JSON.stringify(this.config.configData));
    if (newData !== oldData) {
      this.$emit('onSaveForm', { tankID: this._config.tankID, row });
    }
  }
}
</script>

<style lang="scss" scoped>
.config-panel {
  padding: 20px;
  border: 1px solid #e8eaec;
  border-radius: 4px;
  background-color: #fff;

  .mode-switch {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .stage-config {
    margin-top: 20px;

    h4 {
      margin-bottom: 10px;
      color: #17233d;
    }

    .stage-inputs {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;

      ::v-deep .ivu-input-number {
        width: 100%;
      }
    }
  }

  ::v-deep .vxe-table--render-wrapper {
    margin-bottom: 20px;
  }
}
</style>
